{% extends "../inc/base.html" %}
{% block content %}

<header id="header" class="mui-bar mui-bar-transparent">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <!--<span class="mui-icon iconfont icon-cart"><span class="mui-badge">9</span></span>-->
    <h1 class="mui-title"><img src="/static/webapp/img/logo.png" ></h1>
    <span class="mui-icon iconfont icon-search mui-pull-right"></span>
</header>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-action-back" >
        <span class="mui-icon iconfont icon-back"></span>
        <span class="mui-tab-label">返回</span>
    </a>
    <a class="mui-tab-item" href="#SOHUCS">
        <span class="mui-icon iconfont icon-comment"><span class="mui-badge" id="changyan_count_unit">0</span></span>
        <span class="mui-tab-label">评论</span>
    </a>
    <a class="mui-tab-item" href="#shoucang">
        <span class="mui-icon iconfont icon-favor"></span>
        <span class="mui-tab-label">收藏</span>
    </a>
    <a class="mui-tab-item" href="#fenxiang">
        <span class="mui-icon iconfont icon-share"></span>
        <span class="mui-tab-label">分享</span>
    </a>

    {% if controller.is_login %}
    <a class="mui-tab-item" href="/user/index">
        <span class="mui-icon iconfont icon-my"></span>
        <span class="mui-tab-label">我的</span>
    </a>
    {%else%}
    <a class="mui-tab-item" href="/user/login">
        <span class="mui-icon iconfont icon-myfill"></span>
        <span class="mui-tab-label">登录</span>
    </a>
    {%endif%}

    <a class="mui-tab-item" href="#top">
        <span class="mui-icon iconfont icon-top"></span>
        <span class="mui-tab-label">顶部</span>
    </a>

</nav>
<div class="mui-content detail" >
    <div id="video-box" style="width:100%; height: 200px">

    </div>
    <ul id="list" class="mui-table-view mui-table-view-chevron">
        <li class="mui-table-view-cell ">

                {{pinfo.title}}
          <span class="mui-badge">更新至 <em class="text-danger">{{lastlevel.level}}</em> 集</span>
        </li>
        <li class="mui-table-view-divider">正在播放:{%if info.level== 0%} {{lastlevel.title}} {%else%} {{info.title}}{%endif%}</li>
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">
                播放列表
            </a>
            <ul class="mui-table-view mui-table-view-chevron">
                {%for val in plist%}
                <li class="mui-table-view-cell mui-media mui-media-icon">
                    <a class="mui-navigate-right"  href="{{val.name|get_url(val.id)}}">
                        <div class="mui-media-object mui-pull-left"><span class="mui-icon iconfont {%if info.id == val.id%}icon-videofill{%else%}icon-video{%endif%}"></span>
                        </div>
                        <div class="mui-media-body">
                        {{val.title}}
                        <span class="mui-badge">{{val.level}}</span>
                        </div>
                    </a>
                </li>
                {%endfor%}
            </ul>
        </li>
    </ul>
    <div id="SOHUCS" sid="{{info.id}}"></div>

</div>
{% endblock%}

{% block script %}
<script id="changyan_mobile_js" charset="utf-8" type="text/javascript"
        src="//changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id={{controller.setup.CY_APPID}}&conf={{controller.setup.CY_APPKEY}}">
</script>
<script type="text/javascript" src="//assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>
<script type="text/javascript" src="http://cytron.cdn.videojj.com/latest/cytron.core.js"></script>
<script type="text/javascript">
    mui.init();
    var ivaInstance = new Iva(
            'video-box',//父容器id或者父容器DOM对象，给父容器设置宽高640px*480px以上可以获得最佳的浏览体验；
            {
                appkey: 'VJa72yR7W',//必填，请在控制台查看应用标识
                live: false,//选填，是否是直播流，默认为false
                video: '{%if info.video_id != 0%}http://{{controller.setup.QINIU_DOMAIN_NAME}}/{{info.video_id|get_file("savename",false)}}{%else%}{{info.videourl}}{%endif%}',//必填，播放地址（http://www.tudou.com/programs/view/tM_vZCQy2uM/）或者资源地址（http://7xi4ig.com2.z0.glb.qiniucdn.com/shapuolang_ts.mp4）
                title: '{{info.title}}',//选填，视频标题
                cover: '{{info.cover_id|get_pic("")}}',//选填，视频封面url
                videoStartPrefixSeconds: 0,//选填，跳过片头，默认为0
                videoEndPrefixSeconds: 0,//选填，跳过片尾，默认为0
                /* 以下参数可以在“控制台->项目看板->应用管理->播放器设置”进行全局设置，前端设置可以覆盖全局设置 */
                skinSelect: 0,//选填，播放器皮肤，可选0、1、2，默认为0，
                autoplay: true,//选填，是否自动播放，默认为false
                rightHand: true,//选填，是否开启右键菜单，默认为false
                autoFormat: false,//选填，是否自动选择最高清晰度，默认为false
                bubble: true,//选填，是否开启云泡功能，默认为true
                jumpStep: 10,//选填，左右方向键快退快进的时间
                tagTrack: false,//选填，云链是否跟踪，默认为false
                tagShow: false,//选填，云链是否显示，默认为false
                tagDuration: 5,//选填，云链显示时间，默认为5秒
                tagFontSize: 16//选填，云链文字大小，默认为16像素
            }
    );
    var btn = document.querySelectorAll(".mui-bar-tab a.mui-tab-item");
    for(var i = 0;i<btn.length;i++){
        btn[i].addEventListener("tap",function () {
            var href = this.getAttribute("href");
            if(href=="#top"){
                mui.scrollTo(0,500);
            }else if(href=="#shoucang"){
                //todo
                mui.toast("功能开发中。。。")
                return
            }else if(href=="#fenxiang"){
                //todo
                mui.toast("功能开发中。。。")
                return
            }else {
                mui.openWindow({url: href})
            }

        })
    }

</script>
{% endblock %}